<template>
  <form-layout>
    <span slot="title">{{$t('starting.joinTeam')}}</span>
    <v-form v-model="valid" ref="joinForm" lazy-validation>
      <v-select
        :label="$t('starting.class')"
        :items="classes"
        :rules="[v => !!v || '请选择你所在班级']"
        prepend-icon="class"
        v-model="joinForm._class"
        required
      ></v-select>
      <v-select
        :label="$t('starting.cadre')"
        :items="cadres"
        prepend-icon="grade"
        v-model="joinForm.cadre"
      ></v-select>
      <v-select
        :label="$t('starting.dormitory')"
        :items="dormitories"
        v-model="joinForm.dormitory"
        prepend-icon="domain"
      ></v-select>
      <v-text-field
        :label="$t('starting.room')"
        v-model="joinForm.room"
        prepend-icon="local_convenience_store"
      ></v-text-field>
      <v-icon>fab fa-qq</v-icon>
      <v-text-field
        :label="$t('starting.qq')"
        v-model="joinForm.qq"
      ></v-text-field>
      <v-icon>fab fa-weixin</v-icon>
      <v-text-field
        :label="$t('starting.wechat')"
        v-model="joinForm.wechat"
      ></v-text-field>


      <v-btn class="primary mt-3" @click.native="handleJoin" :disabled="!valid" block>{{$t('starting.joinTeam')}}</v-btn>

    </v-form>
  </form-layout>
</template>

<script>
  import FormLayout from '@/views/layout/FormLayout'
  import { join } from '@/api/team'
  export default {
    components: { FormLayout },
    data() {
      return {
        valid: true,
        cadres: ['无', '班长', '副班长', '团支部书记', '学习委员', '劳动委员', '体育委员', '生活委员', '纪律委员', '宣传委员', '文娱委员', '心理委员', '组织委员', '通讯委员'],
        classes: this.$route.query.classes || [],
        dormitories: this.$route.query.dormitories || [],
        joinForm: {
          teamId: this.$route.query.teamId,
          userId: this.$store.getters.userId,
          cadre: '',
          _class: '',
          dormitory: '',
          room: '',
          qq: '',
          wechat: ''
        }
      }
    },
    methods: {
      handleJoin() {
        if (this.$refs.joinForm.validate()) {
          join(this.joinForm).then(res => {
            if (res.status === 200) {
              this.$store.commit('SET_TEAM', res.data.team)
              this.$router.push({ path: '/' })
            } else if (res.status === 204) {
              this.$notify.warning(`该团队暂不支持外部成员加入`)
            }
          })
        }
      }
    }
  }
</script>

<style scoped>

</style>
